De flex-shrink eigenschap

Syntaxis

flex-shrink: <number>

Beschrijving

De flex-shrink eigenschap stelt de flex-krimpfactor van een flex-item in. De flex-krimpfactor is een <getal> dat aangeeft hoeveel een flex item ten opzichte van de andere flex itemns in de flexibele container krimpt wanneer negatieve vrije ruimte wordt verdeeld. De flex-krimpfactor wordt vermenigvuldigd met de flex basis (zie flex-basis) bij de verdeling van negatieve ruimte. De initiële waarde is nul (0), wat betekent dat standaard de items niet krimpen, en negatieve getallen zijn ongeldig.

Als de som van de belangrijkste afmetingen (zie Een flexibele lay-out maken) van alle flex items groter is dan de hoofdafmeting van de flex container, kan je opgeven hoeveel de flex items mogen krimpen. De lengte van alle flex items die buiten de hoofdafmeting van de container vallen is de negatieve ruimte. Met behulp van de flex-shrink eigenschap, kan je deze negatieve ruimte te verdelen over de flex items. De negatieve ruimte wordt verdeeld naar rato van de flex-basis, vermenigvuldigd met de flex-shrink ratio. De flex-basis is de initiële grootte van het flex item, voordat de vrije ruimte wordt verdeeld op basis van de flex-factoren.

Je kan bijvoorbeeld de ruimte onder de flex items zodanig verdelen dat één van deze items twee keer zoveel negatieve ruimte krijgt als de andere. Daarvoor stel je de flex-shrink waarde van de eigenschap in op 2 (twee). Een item met flex-shrink: 2 zal twee keer zoveel krimpen als een item met flex-shrink: 1. Het eerste item absorbeert twee keer zo veel negatieve ruimte als het tweede. Dus, voor een elke pixel dat het tweede item krimpt, krimpt het eerste item met twee pixels. Hoe hoger de flex-shrink waarde, hoe meer het item krimpt ten opzichte van de andere items.

De items in het volgende voorbeeld zitten in een container met een hoofdafmeting van 300px. De vier flex items hebben een hoofdafmeting of een flex-basis van 200px. De items (gecombineerd) hebben duidelijk een grotere afmeting dan de hoofdafmeting van de container. Omdat dit een Flexbox lay-out is, zullen de items automatisch krimpen om te passen in hun container. Maar met behulp van de flex-shrink eigenschap kan je de verhouding waarin de items moeten inkrimpen controleren. Probeer verschillende waarden voor de flex-shrink eigenschap in te voeren om te zien hoe de flex items zich gedragen.

Het instellen van de eigenschap flex-shrink heeft geen effect als er positieve ruimte beschikbaar is in de flex container. Om de flex-shrink te kunnen instellen stel je de flex-basis van beide elementen zodanig in dat de som van de breedten groter is dan de breedte van de container.